/*
  组件属性  ==》 编辑属性的表单组件
*/
import { type VNode, h } from 'vue'
import { type ITextDefaultProps } from './defaultProps'
import ColorPicker from './components/ColorPicker.vue';

export interface IPropToForm {
  component: string;
  subComponent?: string;
  formProps?: { [key: string]: any };
  title?: string;
  options?: { label: string | VNode, value: any }[];
  initialTransform?: (v: any) => any;
  afterTransform?: (v: any) => any;
  // 绑定表单组件的value的 attribute key
  valueProp?: string;
  eventName?: string;
}

export type IPropsToForms = {
  [P in keyof ITextDefaultProps]?: IPropToForm
}

const fontFamilyArr = [
  { label: '无', value: '' },
  { label: '宋体', value: '"SimSun","STSong"' },
  { label: '黑体', value: '"SimHei","STHeiti"' },
  { label: '楷体', value: '"KaiTi","STKaiti"' },
  { label: '仿宋', value: '"FangSong","STFangsong"' },
]
const fontFamilyOptions = fontFamilyArr.map(font => {
  return {
    value: font.value,
    label: h('span', { style: { fontFamily: font.value } }, font.label)
  }
})

// 修改组件属性 所需的 表单组件 的映射关系
export const mapPropsToForms: IPropsToForms = {
  text: {
    component: 'a-textarea',
    formProps: { rows: 3 },
    title: '文本',
    valueProp: 'value',
    afterTransform: (e: any) => e.target.value
  },
  fontSize: {
    component: 'a-input-number',
    title: '字号',
    initialTransform: (v: string) => parseInt(v),
    afterTransform: (e: number) => e ? `${e}px` : '',
    valueProp: 'value'
  },
  lineHeight: {
    component: 'a-slider',
    formProps: { min: 0, max: 3, step: 0.1 },
    title: '行高',
    initialTransform: (v: string) => parseFloat(v),
    afterTransform: (e: string) => e.toString(),
    valueProp: 'value'
  },
  textAlign: {
    component: 'a-radio-group',
    subComponent: 'a-radio-button',
    title: '对齐',
    options: [
      { label: '左', value: 'left' },
      { label: '中', value: 'center' },
      { label: '右', value: 'right' }
    ],
    valueProp: 'value',
    afterTransform: (e: any) => e.target.value
  },
  fontFamily: {
    component: 'a-select',
    subComponent: 'a-select-option',
    title: '字体',
    options: [
      { label: '无', value: '' },
      ...fontFamilyOptions
    ],
    valueProp: 'value'
  },
  color: {
    component: ColorPicker as any,
    title: '字体颜色'
  },
  width: {
    component: 'a-input',
    valueProp: 'value',
    title: '宽度',
    formProps: { max: 373, type: 'number' },
    afterTransform: (e: any) => e.target.value
  }
}
